<template>
  <div class="backup-container">
    <el-card class="backup-card">
      <div class="card-header">
        <h2 class="page-title">
          <el-icon><DataLine /></el-icon>
          备份数据管理
        </h2>
      </div>
      
      <div class="search-container">
        <div class="search-form">
          <div class="form-item">
            <span class="form-label">年份：</span>
            <el-date-picker
              v-model="dataYear"
              type="year"
              placeholder="请选择备份数据的年份"
              value-format="YYYY"
              class="form-control"
            />
          </div>
          
          <div class="form-item">
            <span class="form-label">类型：</span>
            <el-select 
              v-model="backupType" 
              placeholder="备份类型"
              class="form-control"
            >
              <el-option label="所有类型" value="all" />
              <el-option label="全量备份" value="full" />
              <el-option label="增量备份" value="incremental" />
            </el-select>
          </div>
          
          <div class="action-buttons">
            <rip-button 
              @click="handleReset" 
              class="btn-reset"
             
            >
              <el-icon><Refresh /></el-icon>
              重置
            </rip-button>
            <el-button 
              type="primary" 
              @click="handleQuery"
              class="btn-query" 
            >
              <el-icon><Search /></el-icon>
              查询
            </el-button>
          </div>
        </div>
      </div>
      
      <div class="table-container">
        <page-list
          :tableData="backupDataList"
          :total="total"
          @getPage="getPage"
        >
          <el-table-column label="备份名称" prop="filename" width="500">
            <template #default="{ row }">
              <div class="filename-cell">
                <el-icon><Document /></el-icon>
                <span>{{ row.filename }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="备份类型" prop="backupType">
            <template #default="{ row }">
              <el-tag
                :type="getBackupTypeTag(row.backupType)"
                effect="plain"
                size="small"
              >
                {{ row.backupType === 'full' ? '全量备份' : '增量备份' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" prop="createdAt">
            <template #default="{ row }">
              <div class="time-cell">
                <el-icon><Timer /></el-icon>
                <span>{{ formatTime(row.createdAt) }}</span>
              </div>
            </template>
          </el-table-column>
          
          <el-table-column label="操作" width="120">
            <template #default="scope">
              <el-popconfirm
                class="box-item"
                title="确定要还原吗？"
                confirm-button-text="确定"
                cancel-button-text="取消"
                @confirm="handleRestore(scope.row)"
              >
                <template #reference>
                  <el-button 
                    type="primary" 
                    size="small" 
                    plain
                    class="btn-restore"
                  >
                    <el-icon><RefreshLeft /></el-icon>
                    还原
                  </el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </page-list>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useBackup } from '@/hooks/server/useBackup'
import { DataLine, Search, Refresh, Document, Timer, RefreshLeft } from '@element-plus/icons-vue'

const { 
  backupDataList,
  total, 
  page, 
  pageSize, 
  dataYear, 
  backupType, 
  getBackupDataList,
  handleReset,
  handleQuery,
  handleRestore
} = useBackup()

// 获取备份类型对应的标签类型
const getBackupTypeTag = (type) => {
  return type === 'full' ? 'success' : 'warning'
}

// 格式化时间显示
const formatTime = (timestamp) => {
  if (!timestamp) return '--'
  
  try {
    const date = new Date(timestamp)
    return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
  } catch (e) {
    return timestamp
  }
}

const getPage = (pageParams) => {
  page.value = pageParams.page
  pageSize.value = pageParams.pageSize
  getBackupDataList()
}

onMounted(async () => {
  await getBackupDataList()
})

</script>

<style scoped lang="scss">
.backup-container {
  padding: 16px;
  max-width: 1200px;
  margin: 0 auto;
}

.backup-card {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  transition: all 0.3s ease;
  overflow: hidden;
  
  &:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  }
}

.card-header {
  padding: 0 0 20px;
  margin-bottom: 16px;
  border-bottom: 1px solid #ebeef5;
  
  .page-title {
    display: flex;
    align-items: center;
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #303133;
    
    .el-icon {
      margin-right: 8px;
      font-size: 20px;
      color: #409EFF;
    }
  }
}

.search-container {
  margin-bottom: 20px;
  padding: 16px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.form-item {
  display: flex;
  align-items: center;
  margin-right: 16px;
  
  .form-label {
    font-size: 14px;
    color: #606266;
    margin-right: 8px;
    white-space: nowrap;
  }
  
  .form-control {
    width: 180px;
  }
}

.action-buttons {
  display: flex;
  gap: 12px;
  margin-left: auto;
  
  .btn-reset, .btn-query {
    display: flex;
    align-items: center;
    width: 90px;  
    height: 33px;
    
    .el-icon {
      margin-right: 4px;
    }
  }
  
  .btn-reset {
    border-color: #dcdfe6;
  }
  
  .btn-query {
    background: linear-gradient(135deg, #409EFF, #1989fa);
    border: none;
    
    &:hover {
      background: linear-gradient(135deg, #66b1ff, #409EFF);
    }
  }
}

.table-container {
  margin-top: 20px;
}

.filename-cell, .time-cell {
  display: flex;
  align-items: center;
  
  .el-icon {
    margin-right: 6px;
    font-size: 16px;
    color: #909399;
  }
}

.btn-restore {
  padding: 6px 12px;
  display: flex;
  align-items: center;
  
  .el-icon {
    margin-right: 4px;
  }
}

:deep(.el-table) {
  --el-table-border-color: #ebeef5;
  --el-table-header-bg-color: #f5f7fa;
  border-radius: 8px;
  overflow: hidden;
  
  .el-table__header th {
    background-color: #f5f7fa;
    color: #606266;
    font-weight: 600;
  }
  
  .el-table__row {
    transition: all 0.2s ease;
    
    &:hover {
      background-color: #f0f7ff !important;
    }
  }
}

:deep(.el-pagination) {
  margin-top: 16px;
  justify-content: center;
}

@media (max-width: 768px) {
  .search-form {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .form-item {
    width: 100%;
    margin-bottom: 12px;
    
    .form-control {
      width: 100%;
    }
  }
  
  .action-buttons {
    width: 100%;
    margin-left: 0;
    justify-content: flex-end;
  }
}
</style>
